<template>
  <el-dialog :title="title" :visible.sync="dialogFormVisible" width="1200px" v-loading="loading">
    <!-- <el-steps :active="applyModifyStatus" align-center style="margin-bottom:20px">
      <el-step v-for="(item, index) in stepList" :key="index" :title="item.label" :description="item.time"></el-step>
    </el-steps> -->
    <el-form :model="form" class="viewOrExamine" ref="form" label-width="140px" size="mini">
      <el-card class="box-card" shadow="never">
        <div slot="header" class="clearfix">
          <span>基本信息（点击数据即可复制）</span>
        </div>
        <el-row :gutter="4">
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "></div>
              <div style="float: left">投保人/被投保人信息</div>
            </div>
          </el-col>
          <el-col :span="8"><el-form-item label="投保人" style="width: 100%">
              <span @click="copyClick(row.insureName)" class="cursorPointer">{{ row.insureName }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="证件类型">
              <span @click="copyClick(row.insureCertificateType * 1
    === 1
    ? '身份证'
    : '统一社会信用代码')" class="cursorPointer">{{ row.insureCertificateType * 1
    === 1
    ? '身份证'
    : '统一社会信用代码' }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item style="width: 100%" label="证件号码">
              <span @click="copyClick(row.insureCertificateNumber)" class="cursorPointer">{{ row.insureCertificateNumber
                }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="被投保人" style="width: 100%">
              <span @click="copyClick(row.insuredName)" class="cursorPointer">{{ row.insuredName }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="证件类型">
              <span @click="copyClick(row.insuredCertificateType *
    1 === 1
    ? '身份证'
    : '统一社会信用代码')" class="cursorPointer">{{ row.insuredCertificateType *
    1 === 1
    ? '身份证'
    : '统一社会信用代码' }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item style="width: 100%" label="证件号码">
              <span @click="copyClick(row.insuredCertificateNumber)" class="cursorPointer">{{
    row.insuredCertificateNumber }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="联系人" style="width: 100%">
              <span @click="copyClick(row.contactName)" class="cursorPointer">{{ row.contactName }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="联系方式">
              <span @click="copyClick(row.contactPhone)" class="cursorPointer">{{ row.contactPhone }}</span>
            </el-form-item></el-col>

          <el-col :span="8"><el-form-item label="险种">
              <span @click="copyClick(row.templateName)" class="cursorPointer">{{ row.templateName }}</span>
            </el-form-item></el-col>
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "></div>
              <div style="float: left">货运信息</div>
            </div>
          </el-col>
          <!-- <el-col :span="8"><el-form-item label="标记发票号码运单号">
              <span @click="copyClick(row.tagInvoiceWaybill)" class="cursorPointer">{{ row.tagInvoiceWaybill }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="包装和数量">
              <span @click="copyClick(row.containerCount)" class="cursorPointer">{{ row.containerCount }}</span>
            </el-form-item></el-col> -->
          <el-col :span="8"><el-form-item label="货物类型" style="width: 100%">
              <span @click="copyClick(row.insureGoodsName)" class="cursorPointer">{{ row.insureGoodsName}}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="货物名称" style="width: 100%">
              <span @click="copyClick(row.goodsName)" class="cursorPointer">{{ row.goodsName }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="包装" style="width: 100%">
              <span @click="copyClick(row.packName)" class="cursorPointer">{{ row.packName }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="集装箱号" style="width: 100%">
              <span @click="copyClick(row.containerNumber)" class="cursorPointer">{{ row.containerNumber }}</span>
            </el-form-item></el-col>

          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "></div>
              <div style="float: left">运输信息</div>
            </div>
          </el-col>
          <!-- <el-col :span="8"><el-form-item label="运输工具" style="width: 100%">
              <span @click="copyClick(row.transportTool)" class="cursorPointer">{{ row.transportTool }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="航次/车牌号" style="width: 100%">
              <span @click="copyClick(row.shipNumber)" class="cursorPointer">{{ row.shipNumber }}</span>
            </el-form-item></el-col> -->
          <el-col :span="8"><el-form-item label="运输方式" style="width: 100%">
              <span @click="copyClick(row.transportTypeName)" class="cursorPointer">{{ row.transportTypeName }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="启运地" style="width: 100%">
              <span @click="copyClick(row.startPlace)" class="cursorPointer">{{ row.startPlace }}</span>
            </el-form-item></el-col>
          <!-- <el-col :span="8"><el-form-item label="中转地" style="width: 100%">
              <span @click="copyClick(row.middlePlace)" class="cursorPointer">{{ row.middlePlace }}</span>
            </el-form-item></el-col> -->
          <el-col :span="8"><el-form-item label="目的地" style="width: 100%">
              <span @click="copyClick(row.endPlace)" class="cursorPointer">{{ row.endPlace }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="启运日期" style="width: 100%">
              <span @click="copyClick(row.startTime)" class="cursorPointer">{{ row.startTime }}</span>
            </el-form-item></el-col>
          <!-- <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div
                style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "
              ></div>
              <div style="float: left">扩展保险责任</div>
            </div>
          </el-col> -->
          <!-- <el-col :span="24"
            ><el-form-item label="" style="width: 100%">
              <span @click="copyClick(row.insureExtendId)" class="cursorPointer">{{ row.insureExtendId }}</span>
            </el-form-item></el-col
          > -->
          <div style="overflow: hidden; margin: 12px 0">
            <div style="
                width: 2px;
                height: 14px;
                float: left;
                margin-right: 5px;
                background-color: #1890ff;
                margin-top: 3px;
              "></div>
            <div style="float: left">费用信息</div>
          </div>
          <el-col :span="8"><el-form-item label="保险金额" style="width: 100%">
              <span @click="copyClick(row.totalFee)" class="cursorPointer">{{ row.totalFee }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="保险费率（单位‰）" style="width: 100%">
              <span @click="copyClick(insureRateNum)" class="cursorPointer">{{ insureRateNum }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="保险费用" style="width: 100%">
              <span @click="copyClick(row.insureFee)" class="cursorPointer">{{ row.insureFee }}</span>
            </el-form-item></el-col>
          <!-- <el-col :span="8"
            ><el-form-item label="已优惠费率" style="width: 100%">
              <span @click="copyClick(row.discountRate)" class="cursorPointer">{{ row.discountRate }}</span>
            </el-form-item></el-col
          >
          <el-col :span="8"
            ><el-form-item label="已优惠费用" style="width: 100%">
              <span @click="copyClick(row.discountedFees)" class="cursorPointer">{{ row.discountedFees }}</span>
            </el-form-item></el-col
          > -->
          <el-col :span="24">
            <div style="overflow: hidden; margin: 12px 0">
              <div style="
                  width: 2px;
                  height: 14px;
                  float: left;
                  margin-right: 5px;
                  background-color: #1890ff;
                  margin-top: 3px;
                "></div>
              <div style="float: left">发票信息</div>
            </div>
          </el-col>
          <el-col :span="8"><el-form-item label="开具发票" style="width: 100%">
              <span @click="copyClick(row.invoiceStatus * 1 ? '是' : '否')" class="cursorPointer">{{ row.invoiceStatus * 1 ? '是' : '否'
                }}</span>
            </el-form-item></el-col>
          <el-col :span="8"><el-form-item label="发票类型" style="width: 100%">
              <span @click="copyClick(row.invoiceStatus * 1 === 2 ? '专票' : row.invoiceStatus * 1 === 1 ? '普票' : '')" class="cursorPointer">{{ row.invoiceStatus * 1 === 2 ? '专票' : row.invoiceStatus * 1 === 1 ? '普票' : '' }}</span>
            </el-form-item></el-col>
        </el-row>
        <div v-if="row.invoiceStatus * 1">
          <el-row>
            <el-col :span="8">
              <el-form-item label="发票抬头">
                <span @click="copyClick(row.invoiceHead)" class="cursorPointer">{{ row.invoiceHead }}</span>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="8">
            <el-form-item label="企业名称">
              {{ row.invoiceHead }}
              <el-input readonly v-model="row.consigneeName" />
            </el-form-item>
          </el-col> -->
            <el-col :span="8">
              <el-form-item label="税号">
                <span @click="copyClick(row.creditCode)" class="cursorPointer">{{ row.creditCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="row.invoiceType === 2">
              <el-form-item label="收件人名称">
                <span @click="copyClick(row.consigneeName)" class="cursorPointer">{{ row.consigneeName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="row.invoiceType === 2">
              <el-form-item label="收件人地址">
                <span @click="copyClick(row.consigneeAddress)" class="cursorPointer">{{ row.consigneeAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8" v-if="row.invoiceType === 2">
              <el-form-item label="收件人电话">
                <span @click="copyClick(row.consigneePhone)" class="cursorPointer">{{ row.consigneePhone }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="注册地址">
                <span @click="copyClick(row.registerAddress)" class="cursorPointer">{{ row.registerAddress }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="统一信用代码">
                <span @click="copyClick(row.creditCode)" class="cursorPointer">{{ row.creditCode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行名称">
                <span @click="copyClick(row.bankBranchName)" class="cursorPointer">{{ row.bankBranchName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="银行账号">
                <span @click="copyClick(row.bankAccount)" class="cursorPointer">{{ row.bankAccount }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-card>
      <!-- <el-col :span="24"
        ><el-form-item label="备注">
          <el-input
            type="textarea"
            v-model="form.desc"
          ></el-input> </el-form-item
      ></el-col> -->
    </el-form>

    <div slot="footer" class="dialog-footer">
      <!-- <el-button type="primary" @click="copyClick(JSON.stringify(row))">复制全部</el-button> -->

      <el-button @click="dialogFormVisible = false">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getLabel } from "@/utils/func.js";
const Decimal = require("decimal.js");
const status = [
  {
    label: "申请修改",
    value: "1",
  },
  {
    label: "修改通过",
    value: "2",
  },
  {
    label: "修改不通过",
    value: "3",
  },
];
export default {
  computed: {
    insureRateNum() {
      if (this.row.insureRate) {
        const num1 = new Decimal(this.row.insureRate);
        const num2 = new Decimal("10");
        // 执行乘法运算
        const result = num1.times(num2);
        // 输出结果
        return result;
      } else {
        return 0;
      }
    },
  },
  data() {
    return {
      loading: false,
      headers: { "Content-Type": "multipart/form-data" },
      insureUrl: "",
      title: "查看",
      dialogFormVisible: false,
      form: {
        insureNum: "",
      },
      stepList: [],
      row: {},
      crj: "fff",
      file: null,
      applyModifyStatus: 0,
    };
  },
  methods: {
    // getProcess(orderNum) {
    //         this.showFollowing = true
    //         this.$post("/warranty/modify/process", {
    //             orderNum
    //         }).then(res => {
    //             this.stepList = []
    //             res.data.forEach(item => {
    //                 this.stepList.push({
    //                     label: getLabel(status, item.applyModifyStatus),
    //                     time: item.createTime || item.updateTime
    //                 })
    //             })
    //             this.applyModifyStatus = res.data.length ? res.data.length : 0
    //         })
    //     },
    onSuccess(res, file) {
      if (res.code * 1 === 200) {
        this.info.businessLicense = file;
        this.$message.suucess("上传成功");
      } else {
        this.$message.error("上传失败");
      }
    },
    beforeUpload(file) {
      this.file = file;
      if (
        file.type !== "image/jpeg" &&
        file.type !== "image/png" &&
        file.type !== "image/jpg"
      ) {
        this.$message.warning("请上传图片");
        return false;
      }
      return true;
    },
    uploadFile() {
      this.loading = true;
      const headers = {
        "Content-Type": "multipart/form-data",
      };
      const formData = new FormData();
      formData.append("file", this.file);
      this.$post("/file/upload", formData, headers)
        .then((res) => {
          this.insureUrl = res.data;
        })
        .catch(() => {
          this.fileList = [];
        })
        .finally(() => {
          this.loading = false;
        });
    },
    copyClick(data) {
      var input = document.createElement("input"); // 创建input标签
      input.value = data; // 将input的值设置为需要复制的内容
      document.body.appendChild(input); // 添加input标签
      input.select(); // 选中input标签
      document.execCommand("copy"); // 执行复制
      this.$message.success("复制成功"); // 成功提示信息
      document.body.removeChild(input); // 移除input标签
    },
    returnPolicy() {
      if (!this.form.insureNum) {
        this.$message.error("请填写保单号");
        return;
      }
      const params = {
        warrantyId: this.row.warrantyId,
        insureUrl: this.insureUrl,
        insureNum: this.form.insureNum,
      };
      this.$post(`/warranty/insure/upInfo`, params).then((res) => {
        this.$message.success("回传成功"); // 成功提示信息
        this.$emit("initTable");
      });
    },
  },
};
</script>
<style scoped lang="scss">
.viewOrExamine::v-deep {
  .el-form-item {
    margin-bottom: 8px;
  }
}

.cursorPointer {
  cursor: pointer;
}
</style>